<template>
  <div class="order">
    <div class="order-title">订单列表</div>
    <div class="order-init-box" v-if="collectionFlag">
      <order-init />
      <order-vehicle />
    </div>
    <div class="order-bottom" v-else>
      <div class="lis-box" v-for="item in orderList" :key="item.id" @click="selectOrdering(item.orderStatus)">
        <van-swipe-cell @close="closeSwipe(item)">
          <div class="li-top">
            <div class="top-left">{{item.company}}</div>
            <div class="status" :class="{statusOver : item.orderStatus === 1}">{{item.orderStatus === 1 ? "已完成" : "正在进行"}}</div>
          </div>
          <div class="li-middle">
            <div class="middle-left">
              <img :src="item.imgSrc" alt="">
            </div>
            <div class="middle-center">
              <div>{{item.licenseNum}}</div>
              <div>{{item.rentalPrice}}</div>
            </div>
            <div class="middle-right">
              <div>{{item.totalMoney}}</div>
              <button>再次租车</button>
            </div>
          </div>
          <template #right>
            <van-button square text="删除" type="danger" class="delete-button" style="height: 100%" />
          </template>
        </van-swipe-cell>
      </div>
    </div>
    <!-- <vehicle-rental-map v-else :listData="orderData" /> -->

    <!-- 底部导航栏 -->
    <footer-guide />
  </div>
  <!-- new Date(new Date().setMinutes(new Date().getMinutes() + 30)); -->
</template>
<script>
import OrderInit from '../../components/Order/OrderInit.vue';
import OrderVehicle from '../../components/Order/OrderVehicle.vue';
import FooterGuide from '../../components/FooterGuide/FooterGuide.vue';
import { deleteOrderList, getCarListByCarId, selectOrderListById } from "../../api";
import WalletTitle from '../../components/common/WalletTitle.vue';
export default {
  components: { OrderInit, OrderVehicle, FooterGuide, WalletTitle },
  data() {
    return {
      orderStatus: '',
      orderData: {},
      initStatus: false,
      orderList: [],
      statusList: [],
      collectionFlag: true
    }
  },
  mounted() {
    this.getOrderStatus();
  },
  methods: {
    selectOrdering(e) {
      if(e === 0) {
        this.$dialog.confirm({
          message: '确定进入订单页吗？'
        }).then(() => {
          this.$router.push('/rental');
        }).catch(() => {
          return false;
        })
      }
    },
    // 删除订单方法
    closeSwipe(e) {
      this.$dialog.confirm({ // 弹框确认是否进入订单页面
        message: '是否要删除收藏？'
      }).then(() => {
        deleteOrderList({
          "id": e.id
        }).then(() => {
          console.log('删除订单成功');
          getCarListByCarId(this.$cookie.get('userId')).then(res2 => { // 如果没有订单时则上面显示无订单，下面显示车辆信息
            this.orderList = res2.data.data;
          })
        })
      }).catch(() => {
        return false;
      })
    },
    // 渲染订单
    getOrderStatus() {
      selectOrderListById(this.$cookie.get('userId')).then(res => {
        this.statusList = res.data.data;
        if(res.data.data.length === 0) { // 判断当前用户有无订单，显示
          this.collectionFlag = true;
        }else {
          this.collectionFlag = false;
        }
        getCarListByCarId(this.$cookie.get('userId')).then(res2 => {
          this.orderList = res2.data.data;
        })
      })
    }
  }
};
</script>
<style lang="scss" scoped>
.order {
  width: 100%;
  height: 100%;
  background: rgb(236, 236, 236);
  margin-bottom: $height*2;
  .order-title {
    width: 100%;
    height: $height;
    line-height: $height;
    // color: $color;
    font-size: 14px;
    text-align: center;
    background-color: #fff;
  }
  .order-init-box {
    width: 100%;
    height: 100%;
  }
  .order-bottom {
    padding-bottom: 20px;
  }
  // 订单列表
  .lis-box {
    width: 94%;
    margin: 0 auto;
    background-color: #fff;
    margin-top: 10px;
    padding: 4px;
    box-sizing: border-box;
    &:last-of-type {
      margin-bottom: 100px;
    }
    .li-top {
      width: 100%;
      height: $height/1.4;
      display: flex;
      flex-flow: row nowrap;
      div {
        width: 50%;
        &:nth-of-type(1) {
          text-align: left;
        }
        &:nth-of-type(2) {
          text-align: right;
          padding-right: 15px;
          box-sizing: border-box;
          font-weight: bold;
        }
      }
    }
    .li-middle {
      width: 100%;
      height: $height*2;
      display: flex;
      flex-flow: row nowrap;
      .middle-left {
        width: 20%;
        display: flex;
        align-items: center;
        border: 1px solid rgb(229, 229, 229);
        img {
          width: 100%;
        }
      }
      .middle-center {
        width: 60%;
        padding-left: 10px;
        box-sizing: border-box;
        div {
          &:nth-of-type(1) {
            margin-top: 12px;
          }
          &:nth-of-type(2) {
            margin-top: 4px;
          }
        }
      }
      .middle-right {
        width: 26%;
        position: relative;
        div {
          &:nth-of-type(1) {
            padding-top: 14px;
            box-sizing: border-box;
            font-weight: bold;
            &::before {
              content: "￥";
              font-weight: normal;
            }
          }
        }
        button {
          position: absolute;
          bottom: 10px;
          right: 15px;
          padding: 2px 4px;
          text-align: center;
          background-color: rgb(247, 246, 246);
          color: #444;
          border: 1px solid rgb(205, 205, 205);
          border-radius: 4px;
        }
      }
    }
  }
  .status {
    color: $color;
  }
  .statusOver {
    color: #666;
    text-decoration: line-through;
  }
}
</style>